---
title: Tailwind CSS Spinner - Components Library @David UI
description: Indicate loading states with Tailwind CSS spinner components. Lightweight, responsive designs for buttons, modals, and full-page applications.
github: Spinner
prev: docs/react/inputs
next: docs/react/Spinner-group
---

# Tailwind CSS Spinner

David UI’s spinner component keeps users informed during loading processes such as loading data, performing an operation, or waiting for a response from the server. Lightweight and styled with Tailwind CSS, it integrates easily into buttons, modals, or full pages. 

See below our Tailwind CSS examples of spinner components. Copy-paste them directly to your project.

---

## Basic Spinner

This basic spinner design uses two concentric circles to create a smooth spinning effect. Its minimalistic style ensures that it complements the application content without drawing unnecessary attention.

<PreviewWithCode relativePath="spinner/spinner-demo.tsx" language="html" />

---

## Spinner Sizes

This example showcases spinner icons in varying sizes, progressing from smaller to larger. Select the size that best aligns with your project's design and functionality needs.

<PreviewWithCode relativePath="spinner/spinner-sizes.tsx" language="html" />

---

## Spinner Colors

Discover how to customize the color scheme of your spinner component. The animation uses the `text-surface` class for the spinning effect, while individual SVG paths feature distinct colors such as primary, secondary, info, success, warning, and error. Tailor the color palette to suit your project’s aesthetic.

<PreviewWithCode relativePath="spinner/spinner-colors.tsx" language="html" />

---

## Spinner Custom Styles

Explore how to apply unique customizations to your spinner with Tailwind CSS classes. The animation effect (`animate-spin`) adds dynamic motion, signaling an ongoing process. The subtle gray hue from the `text-surface` class enhances visibility without overpowering the content, while `w-16 h-16` sets the spinner to a larger size, making it suitable for attention-grabbing scenarios.

<PreviewWithCode relativePath="spinner/spinner-custom-styles.tsx" language="html" />

<br />

